<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>

    <style>
            body{
                margin: 0;
                padding: 0;
            }
            .first{
                  background-color: #0da5d6;
                padding-top: 10px;
            }
            /*第一屏*/
            .first .logo{
                   background: url("images/logo.png") no-repeat ;
                   width: 251px;
                   height: 186px;
                   margin: auto;
            }
            .first .text{
                  margin: 10px;
                  text-align: center;
            }
            .first .text>img{
                 margin: 60px 34px;
                 opacity: 0;
                 transition:all 1s;
            }

            .first .info
            {
                    margin: 40px auto;
                    background: url("images/info_1.png") no-repeat;
                    width: 772px;
                    height: 49px;

            }

            /*第一屏动画*/
            .first.current .text>img{
                 margin: 60px 10px;
                 opacity: 1;
            }



            /*
                  第二屏。
            */
            .seconds{
                background-color: #2AB561;

            }

            .seconds>div{
                 display: flex;
                 align-items: center;
                 justify-content: center;

            }

            .seconds .shield{
                  width: 500px;
            }
            .seconds .shield>img{
                 display: block;
                 float: left;
            }

            .seconds .info{
                 background: url("images/info_2.png") no-repeat;
                 width: 635px;
                 height: 309px;
            }




            .thrid{
                background-color: #DE8910;
                position: relative;
                overflow: hidden;
            }

            .thrid>div{
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
            }

            .thrid .info{
                background: url("images/info_3.png");
                width: 631px;
                height: 278px;
            }
            .thrid .cricle{
                 background: url("images/circle.png");
                 width: 453px;
                 height: 449px;
            }

            .thrid .rocket{
                 background: url("images/rocket.png");
                 width: 203px;
                 height: 204px;
                 position: absolute;
                 left: 0;
                 bottom:0;
                 transform: translate(100px,200px);
                 transition:all 1s linear;
            }

            .thrid.current  .rocket{
                 transform:translate(900px,-300px)
            }

            .fourth{
                background-color: #16BA9D;

            }
            .fourth>div{
                 display: flex;
                 align-items: center;
                 justify-content: space-around;
            }
            .fourth .search{
                    width: 530px;
                    height: 300px;
                    position: relative;

                    transform:translate(-120%);

            }
            .fourth .info{
                    background: url("images/info_4.png");
                    width: 612px;
                    height: 299px;
            }

            .fourth .toolbar{
                 background: url("images/search.png");
                 width: 529px;
                 height: 66px;
            }
            .fourth .keys{
                 background: url("images/key.png");
                 width: 0px;
                 height:22px;
                 position: absolute;
                 left:20px;
                 top: 23px;
            }

            .fourth .wrap{
                 margin-top: -13px;
                 overflow: hidden;
            }
            .fourth .wrap .result{
                 background: url("images/result.png");
                 transform:translateY(-100%);
                 width: 529px;
                 height: 372px;

            }

            /*第四屏幕动画*/
            .fourth.current .search{
                 transform:translate(0);
                 transition:all 1s linear;
            }

            .fourth.current .result{
                 transform:translateY(0);
                 transition:all 1s linear 2.3s;
            }

            .fourth.current .keys{
                 animation: changeWidth 1s steps(5) 1.2s forwards;
            }



            @keyframes changeWidth {
                     0%{
                          width: 0px;
                     }
                     100%{
                          width: 99px;
                     }
            }

            /*
                    第五屏幕
            */
            .fivth{
                 background: #0DA5D6;
            }

            .fivth>div{
                 display:flex;
                 flex-direction: column;
                 align-items: center;
            }
            .fivth .info{
                 margin-top: 10px;
                 background: url("images/info_5.png");
                 width: 1077px;
                 height: 134px;
            }
            .fivth .browser{
                  flex: 1;
                  position: relative;
            }

            .fivth .browser .toolbar{
                 background: url("images/toolbar.png");
                 width: 1004px;
                 height: 79px;
            }
            .line{
                 position: absolute;
                 background: #fff;
                 opacity: 0;
                 transition:all 1s linear;
            }
            .leftline{
                 width: 1px;
                 height: 100%;
                 left: 0;
                 top: 0;
            }
            .topline{
                height: 1px;
                width: 100%;
                left: 0;
                top: 0;
            }
            .rightline{
                height: 100%;
                width: 1px;
                right: 0;
                top: 0;
            }
            .bottomline{
                 height: 1px;
                 width: 100%;
                 bottom: 0;
                 left: -100%;

            }


          /*  .bg{
                 background: url("images/extra.png");
                 width: 394px;
                 height: 29px;
                 position: absolute;

                 bottom: 0;
            }*/

            .toolbarline{
                 height: 29px;
                 width: 1024px;
                 border: 1px solid #fff;
                 position: absolute;
                 left: 23px;
                 top: 23px;
            }


            .current.fivth .bottomline{
                left: 0;
                opacity: 1;
            }


    </style>
</head>
<body>
     <section id="fullpageId">
          <div class="first section">
                <div class="logo"></div>
                <div class="text">
                    <img src="images/text_1.png">
                    <img src="images/text_2.png">
                    <img src="images/text_3.png">
                    <img src="images/text_4.png">
                    <img src="images/text_5.png">
                    <img src="images/text_6.png">
                    <img src="images/text_7.png">
                    <img src="images/text_8.png">
                </div>
                <div class="info"></div>
          </div>
          <div class="seconds section">
                 <div class="shield">
                         <img src="images/shield_1.png">
                         <img src="images/shield_2.png">
                         <img src="images/shield_3.png">
                         <img src="images/shield_4.png">
                         <img src="images/shield_5.png">
                         <img src="images/shield_6.png">
                         <img src="images/shield_7.png">
                         <img src="images/shield_8.png">
                         <img src="images/shield_9.png">
                 </div>
                 <div class="info">

                 </div>

          </div>
          <div class="thrid section">
                <div class="info"></div>
                <div class="cricle"></div>
                <div class="rocket"></div>
          </div>
          <div class="fourth section">

              <div class="search">
                  <div class="toolbar"></div>
                  <div class="keys"></div>
                  <div class="wrap">
                      <div class="result"></div>
                  </div>
              </div>

              <div class="info"></div>

          </div>
          <div class="fivth section">

                    <div class="info">

                    </div>
                    <div class="browser">
                            <div class="toolbarline"></div>
                            <div class="toolbar"></div>
                            <div class="leftline line"></div>
                            <div class="rightline line"></div>
                            <div class="topline line" ></div>
                            <div class="bottomline line"></div>
                            <div class="bg"></div>
                    </div>
          </div>
     </section>

    <script>
            window.onload=function(){

                <!--
                     onmousewheel 滚轮事件。
                -->



                    $("#fullpageId").fullpage({
                        afterLoad: function (anchorLink, index) {
                            $(".current").removeClass("current");
                            setTimeout(function(){
                                // 延时100毫秒执行*/
                                $('.section').eq(index-1).addClass('current');
                            },100);
                        },
                    });

            };

    </script>
</body>
</html>